<template>
  <div>
    <bread class="describe">
      <h1>科研公告</h1>
      <small>可选择向全校或部分单位发送，员工手机APP</small>
      <div class="pull-right">
        <el-button size="small" class="custom-button" plain @click="toAnnouncements">发布公告</el-button>
      </div>
    </bread>
    <pageContent isCard>
      <div class="list">
        <ul>
          <li @click="toArticle">
            <div class="title">
              <div class="info">
                <h1>中山大学科技计划项目管理办法</h1>
                <p>2018/19/13-09:30</p>
              </div>
              <el-popover
                placement="top"
                width="160"
                trigger="hover"
                v-model="visible2">
                <p>此操作将永久删除该公告，是否继续？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click.prevent="visible2 = false">取消</el-button>
                  <el-button type="primary" size="mini" @click.prevent="visible2 = false">确定</el-button>
                </div>
                <a href="javascript: void(0);" slot="reference">删除</a>
              </el-popover>
            </div>
            <div class="content">师生员工： 因北校园建设施工需要，北校园北门及相应路段将于2018 年 5 月 14 日起围蔽施工，原北门进出的交通班车将迁至南门车房楼下。根据北校园实际情况，相关部门综合考虑各种因素后，决定对北校园往返东校园、南校园的交通班车时刻表进行部分调整（红字为调整部分），从 2018 年 5 月14 日（星期一）起实行如下新的运行时刻表，不涉及北校园的广州校区交 ……</div>
            <div class="footer">
              <span>附件：</span><i class="iconfont icon-home"></i><a href="javascript: void(0);">班车时刻表 .pdf</a>
            </div>
          </li>
          <li>
            <div class="title">
              <div class="info">
                <h1>中山大学科技计划项目管理办法</h1>
                <p>2018/19/13-09:30</p>
              </div>
              <a href="javascript: void(0);">删除</a>
            </div>
            <div class="content">师生员工： 因北校园建设施工需要，北校园北门及相应路段将于2018 年 5 月 14 日起围蔽施工，原北门进出的交通班车将迁至南门车房楼下。根据北校园实际情况，相关部门综合考虑各种因素后，决定对北校园往返东校园、南校园的交通班车时刻表进行部分调整（红字为调整部分），从 2018 年 5 月14 日（星期一）起实行如下新的运行时刻表，不涉及北校园的广州校区交 ……</div>
            <div class="footer">
              <span>附件：</span><i class="iconfont icon-home"></i><a href="javascript: void(0);">班车时刻表 .pdf</a>
            </div>
          </li>
        </ul>
      </div>
    </pageContent>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      activeName: 'second',
      visible2: false
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    toAnnouncements() {
      this.$router.push('/index/research-tools/announcements')
    },
    toArticle() {
      this.$router.push('/index/research-tools/article')
    },
    deleteNotice() {

    }
  },
  components: {
  }
};
</script>
<style scoped lang="scss">
  @import './index.scss';
</style>
